<layout name="layout" />
<style type="text/css">
.order ul.list li {
	float: left
}
.quantity .add, .quantity .subtract {
	cursor: pointer
}
</style>
<section class="wrapper marc order order_list">
  <header>
    <figcaption>您的订单</figcaption>
  </header>
  <!--.div { display:inline-block; _zoom:1;*display:inline;}-->
  <ul class="list tit">
    <li class="dish">菜品</li>
    <li class="quantity">份数</li>
    <li class="price">单价</li>
  </ul>
  <form action="{:U('Order/address')}" method="post" id="form">
    <volist name="list" id="list_value">
      <ul class="list">
        <li class="dish"><a href="{:U('/cai/'.$list_value['cai_id'])}" target="_blank">{$list_value.cai_name}</a></li>
        <li class="quantity" cai_id="{$list_value['cai_id']}"> <a class="subtract" cai_id="{$list_value['cai_id']}"></a>
          <input type="text" class="quantity cai_num_input" name="cai_num[{$list_value['cai_id']}]" id="cai_num_{$list_value['cai_id']}" cai_id="{$list_value['cai_id']}" num="{$list_value['cai_num']}" price="{$list_value['cai_price']}" value="{$cai_num[$list_value['cai_id']]}" maxlength="3" />
          <a class="add" cai_id="{$list_value['cai_id']}"></a></li>
        <li class="price"><span>&yen;{$list_value.cai_price|format_price}元</span></li>
      </ul>
    </volist>
    <ul class="list total_price">
      <li class="total_price">总价</li>
      <li class="price" id="total_price">¥0元</li>
    </ul>
    <div class="clear"></div>
    <div class="method">
      <button type="submit" class="r">结&nbsp;&nbsp;帐</button>
      <ul class="l">
        <li>
          <input type="radio" value="1" name="method" id="method_1">
          <label for="method_1">货到付款</label>
        </li>
        <li>
          <input type="radio" value="2" name="method" id="method_2">
          <label for="method_2">在线支付</label>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
  </form>
</section>
<script type="text/javascript">
    var cai_action = {
        "change":function(cai_id,num){
            var most =  parseInt($("#cai_num_"+cai_id).attr("num"));
            if (num > most){
                num = most;
            }
            if (num < 0){
                num = 0;
            }
            $("#cai_num_"+cai_id).val(num);
            this.cacle();
        },
        "cacle":function(){
            var  price = 0;
            $(".cai_num_input").each(function(){
                price += parseFloat((parseInt($(this).attr("price")) * parseInt($(this).val())/100).toFixed(2));
            })
            $("#total_price").html("¥"+price+"元");
        }
    }
    $(document).ready(function(){
        $(".cai_type_select").click(function (){
            $(".cai_type_select").removeClass("active");
            $(this).addClass("active");
            $(".cai_type_list").hide();
            $(".cai_type_"+$(this).attr("type_id")).show();
        })
        $(".cai_type_select:eq(0)").click();
        $(".subtract,.add").click(function(){
            if ("add" === $(this).attr("class")){
                var now_value = parseInt($("#cai_num_"+$(this).attr("cai_id")).val());
                now_value++;
                cai_action.change($(this).attr("cai_id"),now_value);
            }else{
                var now_value = parseInt($("#cai_num_"+$(this).attr("cai_id")).val());
                now_value--;
                cai_action.change($(this).attr("cai_id"),now_value);
            }
        });
        $(".cai_num_input").change(function(){
            var now_value = parseInt($(this).val());
            cai_action.change($(this).attr("cai_id"),now_value);
        });
        $("#form").submit(function(){
            var num = 0;
            $("input.quantity").each(function(){
                num += parseInt($(this).val());
            });
            if (num == 0){
                alert("请选择需要下单的商品");
                return false;
            }
			if($('input:radio[name="method"]:checked').length == 0){
				alert("请选择支付方式");
				return false;
			}
        });
        cai_action.cacle();
    });

</script>